<template>
  <div id="account_container">
    <div class="account-wrap">
      <Return title="我的账户"></Return>
      <div class="account-body">
        <div class="account-item">
          <span class="small-title">当前余额</span>
          <div class="item-body">
            <span class="yue">
              ￥<span class="yue-money">2000.00</span>
            </span>
            <div class="recharge" @click="goRecharge">
              去充值
            </div>
          </div>
        </div>
        <div class="account-item">
          <span class="small-title">我的里程</span>
          <div class="item-body">
            <span class="yue">
              <span class="yue-money">2000公里</span>
            </span>
          </div>
        </div>
        <div class="account-item">
          <span class="small-title">违章信息</span>
          <div class="item-body info">
            <div class="break-rules">
              <span style="font-size: 18px">待处理违章</span>
              <span>10单 <i class="el-icon-arrow-right"></i></span>
            </div>   <br>
            <div class="deposit">
              <span style="font-size: 18px">待处预存金</span>
              <span>￥200 <i class="el-icon-arrow-right"></i></span>
            </div>
          </div>
        </div>
        <div class="account-item">
          <span class="small-title">发票</span>
          <div class="item-body info">
            <div class="break-rules">
              <span style="font-size: 18px">可开发票总额</span>
              <span>￥200 <i class="el-icon-arrow-right"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Account",
  data() {
    return {
      
    }
  },
  methods: {
    goRecharge() {
      this.$router.push({name: 'Recharge'})
    }
  },
};
</script>

<style lang="scss" scoped>
#account_container {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 408px;
  height: 100%;
  overflow: hidden;
  background-color: #34393f;
  .account-wrap {
    width: 348px;
    margin: auto;
    .account-body {
      .account-item {
        border-bottom: 1px solid #3e4448;
        margin-bottom: 20px;
        color: #fff;
        .small-title {
          font-size: 14px;
          opacity: .8;
        }
        .item-body {
          margin-top: 10px;
          padding-bottom: 20px;
          display: flex;
          justify-content: space-between;
          .yue {
            font-size: 18px;
            font-weight: 700;
            padding-top: 5px;
            .yue-money {
              font-size: 28px;
            }
          }
          .recharge {
            font-size: 18px;
            cursor: pointer;
            color: #00a3ff;
            border-radius: 30px;
            border: 2px solid #00a3ff;
            padding: 6px 14px;
          }
        }
        .info {
          display: block;
          padding: 10px 0;
          .break-rules {
            display: flex;
            justify-content: space-between;
            cursor: pointer;
          }
          .deposit {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>>